<template>
	<div class="container">
    赠品设置
		<!-- <div class="jx-container">
      <el-form ref="form" :model="params_list" :rules="rules" label-width="130px" class="jx-form">
        <div class="jx-detail">
          <div class="detail-item">
            <div class="item">
              <el-form-item label="APP名称设置：" prop="name">
                <el-input v-model="params_list.name" placeholder="请输入客户端APP名称">
                </el-input>
                <span class="gray">设置客户端APP名称</span>
              </el-form-item>
              <el-form-item label="" prop="item2">
                <el-input v-model="params_list.itme2" placeholder="请输入商户端APP名称">
                </el-input>
                <span class="gray">设置商户端APP名称</span>
              </el-form-item>
              <el-form-item label="平台客户电话：" prop="item4">
                <el-input v-model="params_list.itme4" placeholder="请输入客户电话">
                </el-input>
              </el-form-item>
              <el-form-item label="合作单位：">
                <div class="unit">
                  <div class="item-inline">
                    <el-upload
                      class="avatar-uploader jx-uploader"
                      name="pic"
                      :data="upload"
                      :headers="headers"
                      :action="$api.common.upload"
                      :show-file-list="false"
                      :on-success="upload1Success">
                      <img v-if="params_list.pic1.img" :src="params_list.pic1.img" class="avatar">
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload> 
                    <el-input v-model="params_list.pic1.name" placeholder="请输入单位名称"></el-input>
                  </div>
                  <div class="item-inline">
                    <el-upload
                      class="avatar-uploader jx-uploader"
                      name="pic"
                      :data="upload"
                      :headers="headers"
                      :action="$api.common.upload"
                      :show-file-list="false"
                      :on-success="upload2Success">
                      <img v-if="params_list.pic2.img" :src="params_list.pic2.img" class="avatar">
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload> 
                    <el-input v-model="params_list.pic2.name" placeholder="请输入单位名称"></el-input>
                  </div>
                </div>
                <div class="unit">
                  <div class="item-inline">
                    <el-upload
                      class="avatar-uploader jx-uploader"
                      name="pic"
                      :data="upload"
                      :headers="headers"
                      :action="$api.common.upload"
                      :show-file-list="false"
                      :on-success="upload3Success">
                      <img v-if="params_list.pic3.img" :src="params_list.pic3.img" class="avatar">
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload> 
                    <el-input v-model="params_list.pic3.name" placeholder="请输入单位名称"></el-input>
                  </div>
                  <div class="item-inline">
                    <el-upload
                      class="avatar-uploader jx-uploader"
                      name="pic"
                      :data="upload"
                      :headers="headers"
                      :action="$api.common.upload"
                      :show-file-list="false"
                      :on-success="upload4Success">
                      <img v-if="params_list.pic4.img" :src="params_list.pic4.img" class="avatar">
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload> 
                    <el-input v-model="params_list.pic4.name" placeholder="请输入单位名称"></el-input>
                  </div>
                </div>
              </el-form-item>
              <el-form-item label="关于我们：" prop="item5">
                <el-input v-model="params_list.itme5" type="textarea" :row="4" placeholder="请输入首页介绍">
                </el-input>
                <span class="gray">首页关于简单介绍，用户端使用</span>
              </el-form-item>
              <el-form-item label="关于云途养护：" prop="item6">
                <el-input v-model="params_list.itme6" placeholder="请输入H5链接">
                </el-input>
                <span class="gray">显示在商户端</span>
              </el-form-item>
            </div>
          </div>
        </div> 
      </el-form>
      <div class="btn-container">
        <el-button class="jx-btn" type="warning" @click="boo.showDialog = false">取消</el-button>
        <el-button class="jx-btn" type="primary" :loading="boo.saveing" @click="submitRow('form')">确定</el-button>
      </div>
    </div> -->
	</div>
</template>

<script>
	export default {
		data() {
			return {
        https: {
          list: this.$api.setting.index,
          common: this.$api.common.upload,
        },
        boo: {
          loading: false,
        },
        headers: {
          'admin-auth-token': localStorage.getItem('ms_token') || ''
        },
        params_list: {
          page: 1,
          size: 10,
          name: '',
          item2: '',
          item4: '',
          item5: '',
          item6: '',
          pic1: {
            img: '',
            name: '',
          },
          pic2: {
            img: '',
            name: '',
          },
          pic3: {
            img: '',
            name: '',
          },
          pic4: {
            img: '',
            name: '',
          }
        },
        upload: {
          dir: 'setting'
        }, 
        rules: {
          item2: [{ required: true, message: '请输入商户户端APP名称', trigger: 'blur' }],
          name: [{ required: true, message: '请输入客户端APP名称', trigger: 'blur' }],
          item4: [{ required: true, message: '请输入客户电话', trigger: 'blur' }],
          item5: [{ required: true, message: '请输入首页介绍', trigger: 'blur' }],
          item6: [{ required: true, message: '请输入链接', trigger: 'blur' }],
        },
			}
		},
		mounted(){
      let _self = this
      _self.getList()
    },
		methods: {
      getList(){
        let _self = this
        let params = {}
        
      },
      upload1Success(res, file){
        let _self = this
        res = res.data
      	if (res.retCode == 200) {
          _self.params_list.pic1.img = res.data
        } else {
          _self.$message.error(res.retMsg)
        }
      },
      upload2Success(res, file){
        let _self = this
        res = res.data
      	if (res.retCode == 200) {
          _self.params_list.pic2.img = res.data
        } else {
          _self.$message.error(res.retMsg)
        }
      },
      upload3Success(res, file){
        let _self = this
        res = res.data
      	if (res.retCode == 200) {
          _self.params_list.pic3.img = res.data
        } else {
          _self.$message.error(res.retMsg)
        }
      },
      upload4Success(res, file){
        let _self = this
        res = res.data
      	if (res.retCode == 200) {
          _self.params_list.pic4.img = res.data
        } else {
          _self.$message.error(res.retMsg)
        }
      },
      submitRow(formName){
        let _self = this
				this.$refs[formName].validate((vaild)=>{
					if(vaild){  
            // _self.boo.saveing = true
            // let params = {
            // }    
            // let success = (res)=>{
            //   res = res.data
            //   if(res.retCode == 200){
            //     _self.getList()
            //   }else{
            //     _self.$message.error(res.retMsg)
            //   }
            //   _self.boo.saveing = false
            //   _self.boo.showDialog = false
            // }
            // _self.$axios.post(_self.https.checked, params, success)   
					}else{
						return false
					}
				})
      }
    }
	}

</script>
<style scoped lang="sass">
  .jx-form .el-input--small, .jx-form .el-textarea
    width: 665px
  .gray
    display: inline-block
  .jx-form /deep/ .el-form-item__label
    color: #333
  .unit
    display: flex
    margin-bottom: 20px
    .item-inline
      display: flex
      margin-right: 30px
      height: 100px
      line-height: 100px
      .el-input
        max-width: 200px
        margin-left: 15px
</style>
